<template>
  <el-radio-group v-model="radioForm" size="large">
    <template v-for="item in data" :key="item.code">
      <el-radio-button v-if="btnCss" :value="item.code" size="large">
        {{ item.name }}
      </el-radio-button>
      <el-radio v-if="!btnCss" :value="item.code" size="large">
        {{ item.name }}
      </el-radio>
    </template>
  </el-radio-group>
</template>

<script setup lang="ts" name="Select">
import { ref, watch } from 'vue'
import type { DynamicData } from '@/components/BasicForm'

const propData = withDefaults(
  defineProps<{
    modelValue: string,
    data: DynamicData[]
    btnCss?: boolean
  }>(),
  { btnCss: true },
)

const emit = defineEmits(['update:model-value'])

const radioForm = ref('')

radioForm.value = propData.modelValue

const stopWatch = watch(() => propData.data, () => {
  if (propData.data.length > 0 && !propData.modelValue) {
    radioForm.value = propData.data[0].code
    stopWatch()
  }
})

watch(() => propData.modelValue, () => {
  radioForm.value = propData.modelValue
})

watch(radioForm, () => {
  emit('update:model-value', radioForm.value)
})

</script>

<style scoped></style>
